<template>
  <div class="content">
    <el-form v-if="clueDetail" label-width="120" :model="clueDetail">
      <h1>基础信息</h1>
      <!--<el-form-item label="标签：">
        <div>
          <span v-for="(item,index) in clueDetail.label_list" :key="index">
            <el-tag style="margin-right: 5px">{{item.label_name}}</el-tag>
          </span>
        </div>
      </el-form-item>-->
      <div class="content-section-Two">
        <div class="section-left">
          <el-form-item label="地址：">
            <div class="form-item-left">{{clueDetail.province+clueDetail.city+clueDetail.area+clueDetail.address}}</div>
          </el-form-item>

          <el-form-item label="备注：">
            <div class="form-item-left">{{clueDetail.remark}}</div>
          </el-form-item>
        </div>
        <div class="section-right">

        </div>
      </div>

      <h1>其他信息</h1>
      <div class="content-section-Two">
        <div class="section-left">
          <el-form-item label="创建时间">{{clueDetail.created_at}}</el-form-item>
          <el-form-item label="更新时间">{{clueDetail.updated_at}}</el-form-item>

        </div>
        <!-- <div class="section-right">
          <el-form-item label="创建者">{{clueDetail.creator}}</el-form-item>
          <el-form-item label="更新者">{{clueDetail.updater}}</el-form-item>
        </div> -->
      </div>

    </el-form>
  </div>
</template>

<script>
    export default {
      props: {
        clueDetail: ''
      },
      mounted() {
        console.log(this.clueDetail)
      }
    }
</script>

<style lang="scss" scoped>

  .content{
    h1{
      font-size: 19px;
    }

    .content-section-Two{
      display: flex;
      justify-content: space-between;
    }

    .section-left{
      width: 47%;
    }

    .section-right{
      width: 47%;
    }
  }
</style>
